<template>
  <el-aside class="el-aside">
    <el-menu class="el-menu" :default-active="this.$route.path" :route="true">
      <div style=" display:flex;padding-left:15px;margin-bottom:3px;box-shadow:0px 2px rgb(200,200,200);height:48px;width:auto;color: rgb(64, 158, 255);background-color:white;font-family: 'Arial Rounded MT Bold';font-size: 22px;font-weight: bolder;letter-spacing: 5px"><el-icon style="font-size:32px;margin-right: 10px"><Operation /></el-icon>管理选项</div>
      <router-link to="/admin/race_list">
        <el-menu-item class="el-menu-item" style="padding-top: 20px"><el-icon><Menu /></el-icon>赛事管理</el-menu-item>
      </router-link>
      <router-link to="/admin/work_choose_contest">
        <el-menu-item class="el-menu-item"><el-icon><Grid /></el-icon>作品管理</el-menu-item>
      </router-link>
      <router-link to="/admin/contes_news">
        <el-menu-item class="el-menu-item"><el-icon><List /></el-icon>动态管理</el-menu-item>
      </router-link>
      <router-link to="/admin/notice">
        <el-menu-item class="el-menu-item"><el-icon><BellFilled /></el-icon>通知管理</el-menu-item>
      </router-link>
      <router-link to="/admin/user">
        <el-menu-item class="el-menu-item"><el-icon><Avatar /></el-icon>用户管理</el-menu-item>
      </router-link>
      <div style="height: 30px;width: auto"></div>
      <router-link to="/admin_login">
        <el-menu-item class="el-menu-item"><el-icon><Promotion /></el-icon>登出</el-menu-item>
      </router-link>
    </el-menu>
  </el-aside>
</template>

<script setup>

</script>

<style></style>

<style scoped lang="scss">
.el-aside {
  width: 185px;
  background-color: rgb(255, 255, 255);
  height: calc(100vh - 60px);
  color: white; 
  text-align: center;
  border-right: 3px solid rgba(200,200,200,0.7);

  .el-menu {
    padding-top: 10px;
    align-items: center;
    background-color: rgb(255, 255, 255);
    width: 182px;
    border-style: none;

    .el-menu-item {
      display: block;
      position: relative;
      font-size: 20px;
      font-weight: bold;
      color: rgb(102, 102, 102);
      height: 70px;
      padding:15px 0px;
      margin-bottom: 20px;
      line-height: 40px;
      background-color: rgb(255, 255, 255);

      .el-icon>*{
        height: 20px;
        width: 20px;
      }
    }

    li:hover {
      color: rgb(64, 158, 255);
      border-right: 2px solid rgb(64, 158, 255);
      background-color: rgba(240,240,240,0.8);
      padding-left: 10px;
      box-shadow: 2px 2px 1px rgb(200,200,200);
    }
  }
}
</style>
<style>
a {
  text-decoration: none;
}

li {
  text-decoration: none;
}
</style>